<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>全屏拼音2</title>
    <script src="../libs/Unify.js"></script>
    <script src="../libs/moonJs.js"></script>
    <script src="../libs/TweenMax.min.js"></script>
    <script src="../libs/ColorManager.js"></script>
    <script src="../libs/PinyinFactory.js"></script>
    <script src="../libs/easeljs.js"></script>
    <script src="../libs/moonEaseljs.js"></script>
    <script src="../libs/SoundFactory.js"></script>
    <!-- <script src="../libs/Tone.js"></script> -->
    <!-- <script src="../libs/vconsole.js"></script> -->
    <style type="text/css">
        body {
            margin: 0;
            background-color: #07aa8f;
        }
        /* canvas { cursor: pointer; } */
    </style>
</head>

<body>
    <script>
        const url='https://ywx620.gitee.io/learn/rec/sound/hanzi/$num.mp3';
        const [width,height]=[window.innerWidth-20,window.innerHeight-5]
        createjs.Ticker.framerate = 30;
        var canvas=document.createElement('canvas');
        [canvas.width,canvas.height]=[width,height*1.25];
        document.body.appendChild(canvas);
        var stage=new createjs.Stage(canvas);
        createjs.Ticker.addEventListener("tick",(e)=>{stage.update();});
        //stage.canvas.style.cursor = 'pointer';
        let fontSize=20;
        if(Unify.isMobile()){
            fontSize=30;
        }
                
        // let label=moonText('汉语拼音字母表',fontSize,'#FFF');
        // stage.addChild(label);
        // [label.x,label.y]=[width/2,5];

        const colors=ColorManager.warnCoolColors([2,3,5,8,11,10,11,9])
        const all=PinyinFactory.all();
        const labels=all.total;
        let [x,y,xnum,wid,hei]=[2,2,23,0,0];
        wid=width/(xnum+1);
        hei=height/(xnum+8);
        let boxs=[];
        function draw(){
            for(let i=0;i<labels.length;i++){
                let as=labels[i];
                let color=colors[i%2];
                //console.log(as.length);
                for(let j=0;j<as.length;j++){
                    let a=as[j];
                    let name=a?a:'';
                    let box=moonBoxText(wid,hei,3,name,fontSize,color,'#FFFFFF',true);
                    box.name=name;
                    moonClick(box,onClick);
                    boxs.push(box);
                    stage.addChild(box);
                }
            }
            Unify.displayRank(boxs,xnum,wid/xnum,hei/xnum,x+wid/2,y+hei/2)
        }
        draw();
        function onClick(e){
            let name=e.currentTarget.name;
            if(name){
                if(all.sm.includes(name)){
                    let url='https://ywx620.gitee.io/learn/rec/sound/pinyin/all/$num.mp3';
                    url=url.replace('$num',name);
                    SoundFactory.alone(url);
                }else{
                    playSound(name);
                }
            }
        }

        function playSound(name){
            if(!PinyinFactory.checkCA(name)){
                name=PinyinFactory.changePinyin(name+'1',1)
            }
            let u=url.replace('$num',name);
            SoundFactory.alone(u);
        }


        //-----------
        let color=colors[7];
        let box=moonBoxText(wid*2,hei,3,'拼音1',fontSize-5,color,'#FFFFFF',true);
        box.x=width/2-wid;box.y=boxs[boxs.length-1].y+hei+2;
        moonClick(box,()=>{window.open('fullPinyin.html')});
        stage.addChild(box);
    </script>
</body>

</html>
